<template>
	<div id="page">
		<div
			style="
				width: 100vw;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			"
		>
			<div
				class="spaceInLeft"
				style="
					width: 50vw;
					height: 60vh;
					position: relative;
					box-shadow: -25px 30px 10px rgba(80, 80, 80, 0.7);
				"
			>
				<el-image
					:src="getFile.getAssetsFile('img', cardImg)"
					style="
						position: absolute;
						z-index: 2;
						width: 40%;
						height: 100.3%;
					"
					:fit="'fill'"
				></el-image>
				<div
					style="
						font-weight: bold;
						color: rgb(188, 41, 41);
						font-size: 16px;
						z-index: 3;
						position: absolute;
						top: 1.5vh;
						left: 1.5vw;
					"
				>
					Amadeus
				</div>
				<el-card
					v-if="!pwdLose"
					style="
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 1;
					"
				>
					<div
						style="
							position: absolute;
							left: 50%;
							top: 15%;
							font-size: 30px;
							letter-spacing: 1px;
							font-weight: bold;
						"
					>
						{{ pageTitle }}
					</div>
					<div style="position: absolute; left: 51%; top: 25%">
						<el-text
							class="mx-1"
							size="small"
							type="info"
							style="display: block; margin: 1vh"
							>用户名</el-text
						>

						<el-input
							v-model="username"
							style="width: 16vw"
							placeholder="Username"
						/>
					</div>
					<div style="position: absolute; left: 51%; top: 40%">
						<el-text
							size="small"
							type="info"
							style="display: block; margin: 1vh"
							>密码</el-text
						>

						<el-input
							show-password
							type="password"
							v-model="password"
							style="width: 16vw"
							placeholder="Password"
						/>
					</div>

					<!-- Confirm -->
					<div
						style="position: absolute; left: 51%; top: 55%"
						v-if="!status"
					>
						<el-text
							size="small"
							type="info"
							style="display: block; margin: 1vh"
							>确认密码</el-text
						>

						<el-input
							type="password"
							show-password
							v-model="confirmPwd"
							style="width: 16vw"
							placeholder="Confirm"
						/>
					</div>

					<div
						style="position: absolute; left: 52%; top: 55%"
						v-if="status"
					>
						<el-link
							type="primary"
							style="font-size: 12px"
							href="/register"
							>没有帐号？立即注册</el-link
						>
					</div>
					<div
						style="position: absolute; left: 75%; top: 55%"
						v-if="status"
					>
						<el-link
							type="danger"
							style="font-size: 12px"
							@click="resetPwd"
							>忘记密码？</el-link
						>
					</div>

					<div style="position: absolute; left: 63%; top: 72%">
						<el-button
							type="success"
							plain
							size="large"
							@click="initRequest"
							>{{ pageTitle }}</el-button
						>
					</div>
				</el-card>
				<el-card
					v-else
					style="
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 1;
					"
				>
					<div
						style="
							position: absolute;
							left: 50%;
							top: 15%;
							font-size: 25px;
							letter-spacing: 1px;
							font-weight: bold;
						"
					>
						重置密码
					</div>
					<div style="position: absolute; right: 10%; top: 16%">
						<el-link
							type="info"
							underline
							@click="pwdLose = !pwdLose"
							>返回登录</el-link
						>
					</div>
					<div
						style="
							transform: scale(0.8);
							position: absolute;
							left: 40%;
							top: 0;
						"
					>
						<updatePassword
							:btnOffset="4"
							:marginTop="'5vh'"
						></updatePassword>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, toRefs, onUnmounted } from 'vue';
import getFile from '../utils/getAssetsFile';
import { useRouter } from 'vue-router';
import updatePassword from './updatePassword.vue';
const router = useRouter();
const props = defineProps({
	pageTitle: {
		type: String,
	},
	cardImg: {
		type: String,
	},
});

let { pageTitle, cardImg } = toRefs(props);
let username = ref('');
let password = ref('');
let confirmPwd = ref('');
let status = ref('');
let pwdLose = ref(false);

const resetPwd = () => {
	pwdLose.value = true;
};

const clearData = () => {
	username.value = '';
	password.value = '';
	confirmPwd.value = '';
};

const emits = defineEmits(['login', 'regist']);
const initRequest = () => {
	console.log(pageTitle.value);
	if (pageTitle.value === '注册') {
		console.log(1);
		emits('regist', username.value, password.value, confirmPwd.value);
		return clearData();
	} else {
		console.log(2);
		emits('login', username.value, password.value);
		return clearData();
	}
};

onMounted(() => {
	if (pageTitle.value === '登录') {
		status.value = true;
	}
});
onUnmounted(() => {
	clearData();
});
</script>

<style scoped>
#page {
	background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
}
.spaceInLeft {
	animation-duration: 1.5s;
}
.el-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(153, 153, 153, 0.3);
}
</style>
